<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <!-- vue基本使用-->
    <button @click="handleClick">点我</button> <!--@click 的原始写法为v-on:click-->
    <input type="text" v-model="num"><button @click="num++">+</button>
    <h1>
        <span v-text = "name"></span>非常帅！<br> <!--{{name}}为插值表达式,网速慢的时候会有插值闪烁问题,所以用v-test代替-->
        {{num}} 位女神为其着迷！
    </h1>
    <span v-text = "name"></span><br>
    <span v-html="name"></span>

    <!--v-model使用-->
    <hr>
    <h1>传智播客已开启下列课程</h1>
    <input type="checkbox" v-model="lessons" value="Java"/>Java<br>
    <input type="checkbox" v-model="lessons" value="Python"/>Python<br>
    <input type="checkbox" v-model="lessons" value="ios"/>IOS<br>

    <h1>
        您已购买下列课程：{{lessons.join(",")}}  <!--join方法拼接数组，参数是间隔符号-->
    </h1>

    <!--v-on ,事件冒泡测试（在@click后面加.stop）
        事件修饰符
        .stop  阻止事件冒泡
        .prevent 阻止默认事件发生
        .capture 使用事件捕获模式
        .self 只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
        .once 只执行一次
    -->
    <div style="width: 100px;height: 100px;background-color: cornsilk;" @click="print('div')">
        div
        <button @click.stop="print('button')">点我试试</button>
        <a href="http://www.baidu.com" @click.prevent.stop="print('baidu')">百度一下，你就知道</a>
    </div>

    <hr>
    <!--v-for遍历数组
        v-for="(item,index) in items"
        items: 要迭代的数组
        item: 迭代得到的数组元素别名
        index: 迭代到的当前元素索引，从0开始
    -->
    <ul>
        <li v-for="(u,i) in users" :key="i">
            {{i}}{{u.name + "," + u.gender + "," + u.age}}
        </li>
    </ul>
    <!-- v-for遍历对象
        v-for="value in object"
        v-for="(value,key) in object"
        v-for="(value,key,index) in object"
        1个参数时，得到的是对象的值
        2个参数时，第一个是值，第二个是键
        3个参数时，第三个是索引，从0开始
    -->
    <ul>
        <li v-for="(v,k,i) in users[0]">{{i + "_" + k + "," + v}}</li>
    </ul>
    <!--v-for遍历数字-->
    <ul>
        <li v-for="i in 5">{{i}}</li>
    </ul>
    <hr>
    <!--v-if-->
    <button @click="show = !show">点击切换</button>
    <h1 v-if="show">
        你好
    </h1>
    <h1 v-show="show">
        你很好，我记住了！
    </h1>
    <ul>
        <li v-for="i in 5" >
            <span v-if="i%2 === 0">偶数：{{i}}</span>
            <span v-else style="background-color: #cccccc">奇数:{{i}}</span>
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app", //element,vue作用的标签
        data:{
            name: "",
            num:1,
            lessons:[],
            users: [
                {name:'柳岩',gender:'女',age:21},
                {name:'mojing',gender:'男',age:22},
                {name:'fangbingbing',gender:'女',age:23},
                {name:'liyifei',gender:'女',age:24},
                {name:'gulizhana',gender:'女',age:25}
            ],
            show: true,
        },
        methods:{
            handleClick(){
                console.log(this);
                console.log("hello!");
            },
            print(msg){
                console.log(msg);
            }
        },
        created(){
            //向后台发起ajax请求，完成对data数据初始化
            this.name = "<font color='blue'>mojing3</font>"; //这里的this不是指调用方法的对象，而是app,即当前的vues实例，必须使用this才能访问到vue中定义的data内的属性、方法等
            //setTimeout(() => this.name = "mojing233",1000)  //延时1秒钟渲染
        }
    });
</script>
</body>
</html>